import React, {useState}from 'react';
import { Table, Card, Breadcrumb, Layout, Form, Input, Row, Col, Button, Modal, Mentions, Menu, List } from 'antd';
import { getAuthList } from '../../api/auth/index';
import { PlusOutlined } from '@ant-design/icons';
const { Content } = Layout;

function NewService1() {
  let Authlist = getAuthList();
  const defaultAuth = [
    {action:'query',name:'查询列表',describe:'查询列表'},
    {action:'get',name:'查询明细',describe:'查询明细'},
    {action:'add',name:'新增',describe:'新增'},
    {action:'update',name:'修改',describe:'修改'},
    {action:'delete',name:'删除',describe:'删除'},
    {action:'import',name:'导入',describe:'导入'},
    {action:'export',name:'导出',describe:'导出'},
  ]
  const [form]= Form.useForm();
  const [editForm] = Form.useForm();

  const [status, setStatus] = useState(false);
  const [nowList, setNowList] = useState(Authlist);
  const [addVisible, setAddVisible] = useState(false);
  const [editVisible, setEditVisible] = useState(false);
  const [actions, setActions] = useState([]);
  const columns=[
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (record)=>{
        return <p>{record===1?"启用":"禁用"}</p>
      }
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (text, record, index)=>{
        return(
          <div style={{margin:-15}}>
            <Button type='link' onClick={editOne.bind(this, record)}>编辑</Button>
            <Button type='link' onClick={deleteOne.bind(this, record)}>删除</Button>
          </div>
        )
      }
    }
  ]
  const configList=[
    {
      title: '操作类型',
      dataIndex: 'action',
      key: 'action',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '描述',
      dataIndex: 'describe',
      key: 'describe',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (text, record, index)=>{
        return(
          <div style={{margin:-15}}>
            <Button type='link' >编辑</Button>
            <Button type='link' >删除</Button>
          </div>
        )
      }
    }
  ]
  const reset=()=>{
    form.setFieldsValue({id:undefined, name:undefined});
  }
  /*模糊查询*/
  const onSearch = React.useCallback((values)=>{
    let [id, name]= [values.id, values.name];
    let temp = [];
    if(!id && !name){
      setNowList(Authlist);
      return;
    }
    if(id && name){
      for (let i = 0; i < Authlist.length; i++) {
        if ((id.length<=Authlist[i].id.length)&&(name.length<=Authlist[i].name.length)) {
          if ((Authlist[i].id.indexOf(id)>=0&&(Authlist[i].name.indexOf(name)>=0))){
            temp.push(Authlist[i]);
          }
        }
      }
    }
    if(id && !name){
      for (let i = 0; i < Authlist.length; i++) {
        if (id.length<=Authlist[i].id.length) {
          if (Authlist[i].id.indexOf(id)>=0){
            temp.push(Authlist[i]);
          }
        }
      }
    }else if(!id && name){
      for (let i = 0; i < Authlist.length; i++) {
        if (name.length<=Authlist[i].name.length) {
          if (Authlist[i].name.indexOf(name)>=0){
            temp.push(Authlist[i]);
          }
        }
      }
    }
    setNowList(temp);
  }, [nowList]);
  const addOne = React.useCallback(()=>{
    const newData = [].concat(nowList);
    newData.push({
      id:"test",
      name:"test",
      status:1,
    })
    setNowList(newData);
  }, [nowList]);
  const deleteOne = React.useCallback((item)=>{
    console.log(item);
  });
  const editOne = (values) =>{
    const [id, name] = [values.id, values.name];  
    editForm.setFieldsValue({id:id, name:name});
    const index = nowList.find((c)=>c.id===id);
    setActions(index.actions);
    setStatus(values.status===0?false:true);
    setEditVisible(true);
  }
  // const deleteOne = React.useCallback(()=>{
  //   data.pop();
  //   setData([].concat(data));
  // }, [data]);
  const onEditFinish=(values)=>{
    console.log(values);
  }
  const onCancel=()=>{
    setEditVisible(false);
    setAddVisible(false);
  }
  const onOk=()=>{
    setEditVisible(false);
    setAddVisible(false);
  }
  const onStatus=(values)=>{
    console.log(values);
  }
  return (
    <Card>
      <Breadcrumb separator=">">
        <Breadcrumb.Item href="/services">角色管理</Breadcrumb.Item>
        <Breadcrumb.Item href="/services/1">权限管理</Breadcrumb.Item>
      </Breadcrumb>

      <Content style={{ margin: '15px 0' }}>
        <Form
        form={form}
        onFinish={onSearch}
        >
          <Row>
            <Col>
              <Form.Item
              name="id"
              label="ID:"
              >
                <Input style={{width:400}} placeholder="请输入ID"/>
              </Form.Item>
            </Col>
            <Col offset={1}>
              <Form.Item
              name="name"
              label="名称:">
                <Input style={{width:400}} placeholder="请输入名称"/>
              </Form.Item>
            </Col>
            <Col offset={3}>
              <Form.Item>
                <Button type='primary' htmlType='submit'>查询</Button>
                <Button onClick={reset}>重置</Button>
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Button type='primary' onClick={()=>setAddVisible(true)}><PlusOutlined/>新建</Button>
          </Row>
        </Form>
        <Table columns={columns} dataSource={nowList} />
        <Modal title="新建权限" visible={addVisible} width={900}>
          <Menu
          multiple={true}
          mode="horizontal"
          overflowedIndicator={false}
          selectedKeys={['index']}
          >
            <Menu.Item key={'index'}>基本信息</Menu.Item>
          </Menu>
          <Form>
            <Row>
              <Col>
                <Form.Item
                name="id"
                label="权限标识(ID):"
                required
                >
                  <Input/>
                </Form.Item>
              </Col>
              <Col>
                <Form.Item
                name="name"
                label="权限名称:"
                required
                >
                  <Input/>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col>
                <Form.Item
                name="status"
                label="状态:"
                required
                >
                  <Button>启用</Button>
                  <Button>禁用</Button>
                </Form.Item>
              </Col>
            </Row>
            <Table bordered title={() => '操作配置'} columns={configList} dataSource={defaultAuth}/>
            <Button>取消</Button>
            <Button>确认</Button>
          </Form>
        </Modal>
        
        <Modal title="编辑权限" visible={editVisible} width={900} onOk={onOk} onCancel={onCancel}>
          <Menu
          multiple={true}
          mode="horizontal"
          overflowedIndicator={false}
          selectedKeys={['index']}
          >
            <Menu.Item key={'index'}>基本信息</Menu.Item>
          </Menu>
          <Form
          size='small'
          form={editForm}
          onFinish={onEditFinish}
          >
            <Row>
              <Col>
                <Form.Item
                name="id"
                label="权限标识(ID):"
                required
                >
                  <Input/>
                </Form.Item>
              </Col>
              <Col>
                <Form.Item
                name="name"
                label="权限名称:"
                required
                >
                  <Input/>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col>
                <Form.Item
                name="status"
                label="状态:"
                required
                >
                  <Button type={status?'primary':''} onClick={()=>{setStatus(true)}}>启用</Button>
                  <Button type={status?'':'primary'} onClick={()=>{setStatus(false)}}>禁用</Button>
                </Form.Item>
              </Col>
            </Row>
            {/* <Table bordered title={() => '操作配置'} columns={configList} dataSource={actions}/> */}
            
          </Form>
        </Modal>
      </Content>
    </Card>
  );
}

export default NewService1;
